<template>
  <div>
    <!--    banner-->
    <img src="../assets/image/banner.png" class="banner"/>
    <!--    放款通知-->
    <div class="lending-info">
      <img src="../assets/image/fangkuantongzi.png" class="fangkuantongzi"/>
      <div class="line"></div>
      <div class="lending-info-text">
        <van-notice-bar :scrollable="false">
          <van-swipe
              vertical
              class="notice-swipe"
              :autoplay="3000"
              :show-indicators="false"
          >
            <van-swipe-item v-for="(item,index) in refundNotice" :key="index">
              用户{{ item ? item.usernum : '' }}刚刚放款{{ item ? item.loanMoney : '' }}万元
            </van-swipe-item>
          </van-swipe>
        </van-notice-bar>
      </div>
    </div>
    <!--    快速申请-->
    <div class="quick-application">
      <img src="../assets/image/diwen2.png" class="dewen1">
      <img src="../assets/image/dewen1.png" class="dewen1 dewen2">
      <div class="quick-application-con">
        <div class="title-box">
          <img src="../assets/image/title-zhuangshi1.png" class="title-zhuangshi1" alt="">
          <div class="title-text">快速申请
            <div class="pass-rate">通过率99%</div>
          </div>
          <img src="../assets/image/title-zhuangshi2.png" class="title-zhuangshi1" alt="">

        </div>
        <div class="tips-text">一键申请 最快<span class="time">24小时</span>放款</div>
        <div class="form-title">您要申请什么样的贷款</div>
        <el-select v-model="formData.productId" placeholder="请选择" class="select-box1">
          <el-option
              v-for="(item,index) in loanMethod"
              :key="index"
              :label="item.description"
              :value="item.itemValue">
          </el-option>
        </el-select>
        <div class="instructions">期限长、额度高、放款快、还款方式灵活、综合成本低！</div>
        <div class="form-title">您的申请金额</div>
        <div class="flex-al">
          <el-input text="number" v-model="formData.applyMoney" placeholder="请输入您要申请的金额"
                    class="select-box1 select-box2 "></el-input>
          <div>万</div>
        </div>

        <!--        <div class="form-title">地区</div>-->
        <!--        <el-select v-model="formData.city" placeholder="请选择" class="select-box1 select-box2 ">-->
        <!--          <el-option-->
        <!--              v-for="(item,index) in citys"-->
        <!--              :key="index"-->
        <!--              :label="item.itemText"-->
        <!--              :value="item.itemValue">-->
        <!--          </el-option>-->
        <!--        </el-select>-->
        <div class="form-title">如何称呼您</div>
        <el-input v-model="formData.name" placeholder="请输入您的姓名" class="select-box1 select-box2 "></el-input>
        <div class="form-title">您的手机号</div>
        <el-input text="number" v-model="formData.phone" placeholder="请输入您的手机号"
                  class="select-box1 select-box2 "></el-input>
        <div class="input-box">
          <el-input type="text" class="input-content" v-model="formData.code" placeholder="请输入短信验证码"></el-input>
          <div class="code-btn" v-if="!isCode" @click="getCode">获取验证码</div>
          <div v-else class="code-btn active-code-btn">{{numCode}}秒后重发</div>
        </div>
        <div class="consulting-num">已有{{ num }}人咨询过此服务</div>
        <div class="contact-me" @click="apply">马上联系我</div>
      </div>
    </div>
    <!--    贷款学院-->
    <div class="content">
      <div class="content-title">
        <span>贷款学院</span>
        <img src="../assets/image/yuan.png" class="yuan">
      </div>
      <div>
        <div class="institute-loans" style="position: relative" ref="btn" v-for="(item,index) in DkList" :key="index">
          <img v-if="item.url" class="institute-loans-img"
               :src="item.url">
          <div class="institute-loans-con">
            <div class="institute-loans-title">{{ item.title }}</div>
            <!--            <div class="institute-loans-con-text">{{ item.content }}</div>-->
          </div>
          <to-weapp :path="`/pages/index/index`"></to-weapp>
        </div>

      </div>

    </div>
    <!--    我们的优势-->
    <div class="content">
      <div class="content-title">
        <span>我们的优势</span>
        <img src="../assets/image/yuan.png" class="yuan">
      </div>

      <div style="position: relative">

        <div class="menu-box">
          <el-row :gutter="10">
            <el-col :span="12">
              <div class="menu">
                <img src="../assets/image/menu1.png" class="menu-img">
                <div class="">
                  <div class="menu-title"><span class="jiacu">10</span>年专业贷款服务</div>
                  <div class="menu-tips">正规机构无套路</div>
                </div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="menu">
                <img src="../assets/image/menu2.png" class="menu-img">
                <div class="">
                  <div class="menu-title"><span class="jiacu">3</span>万用户共同的选择</div>
                  <div class="menu-tips">签订合同无隐性消费</div>
                </div>
              </div>
            </el-col>

          </el-row>
          <el-row :gutter="10">
            <el-col :span="12">
              <div class="menu">
                <img src="../assets/image/menu3.png" class="menu-img">
                <div class="">
                  <div class="menu-title"><span class="jiacu">50 <span class="jia">+</span> </span>年专业贷款服务</div>
                  <div class="menu-tips">一切为客户着想</div>
                </div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="menu">
                <img src="../assets/image/menu4.png" class="menu-img">
                <div class="">
                  <div class="menu-title"><span class="jiacu">7*9</span>客服实时响应</div>
                  <div class="menu-tips">快速为您解决贷款需求</div>
                </div>
              </div>
            </el-col>

          </el-row>
        </div>
        <to-weapp :path="`/pages/index/index`"></to-weapp>
      </div>
    </div>
    <!--    服务区域-->
    <div class="content">
      <div class="content-title">
        <span>服务区域</span>
        <img src="../assets/image/yuan.png" class="yuan">
      </div>
      <div>
        <img src="../assets/image/map.png" class="map">
        <a href="tel:023-67456888" class="zx-phone">咨询电话 023-67456888</a>
      </div>

    </div>
    <!--    赚钱社区-->
    <div class="content">
      <div class="content-title">
        <span>赚钱社区</span>
        <img src="../assets/image/yuan.png" class="yuan">
      </div>
      <div>

        <div style="position: relative" class="institute-loans" v-for="(item,index) in zqList" :key="index">
          <img v-if="item.url" class="institute-loans-img"
               :src="item.url">
          <div class="institute-loans-con">
            <div class="institute-loans-title">{{ item.title }}</div>
            <!--            <div class="img-box">-->
            <!--              <div class="institute-loans-con-text" v-html="item.content"></div>-->
            <!--            </div>-->

          </div>
          <to-weapp :path="`/pages/index/index`"></to-weapp>
        </div>
      </div>

    </div>
    <!--    底部-->
    <div class="bottom">
      <a href="http://ws.daitougou.com/ws/userCli" class="bottom-item" >
        <img src="../assets/image/btn1.png" class="btn1">
        <span class="btn-text">在线咨询</span>
        <!--        <to-weapp :path="`/pages/index/index`"></to-weapp>-->
      </a>
      <div class="btn-line"></div>
      <!--      <div class="bottom-item" @click="scollTo">-->
      <!--        <img src="../assets/image/btn2.png" class="btn1">-->
      <!--        <span class="btn-text">申请贷款</span>-->
      <!--&lt;!&ndash;        <to-weapp :path="`/pages/index/index`"></to-weapp>&ndash;&gt;-->
      <!--      </div>-->
      <!--      <div class="btn-line"></div>-->
      <div class="bottom-item">
        <img src="../assets/image/btn3.png" class="btn1">
        <a href="tel:023-67456888" class="btn-text">电话咨询</a>
      </div>
    </div>
    <!--    二维码弹层-->
<!--    <code-layer v-show="show"></code-layer>-->

  </div>
</template>

<script>


import ToWeapp from "@/components/to-weapp";
// import  codeLayer from  "@/components/code";
import wxShare from "@/utils/share";

export default {
  name: "index",
  components: {ToWeapp},
  data() {
    return {
      zqList: [],
      DkList: [],
      loanMethod: [], //产品
      citys: [],//城市
      formData: {
        "applyMoney": '',  //金额
        "phone": "", //手机号
        name: '', //名字
        // city: '', //城市id
        productId: '', //产品id
        belongId: '',//邀请人
        code: ''
      },
      refundNotice: [],//放款通知
      num: 500,
      show: false,//二维码弹层
      isCode: false, //是否获取验证码
      numCode:60,
    }
  },

  mounted() {
    wxShare('有房就可贷，利率低最快当日放款\n' +
        '期限长、额度高、放款快、还款方式灵活、综合成本低','已帮助2万用户实现贷款需求','https://drxf-oss.oss-cn-chengdu.aliyuncs.com/static/photo/pro/shareQuickApply.png');
    console.log(window.location.href);
    let id = window.location.href.replace('#/', '').split('scene=')[1] || '';
    console.log('id', id)
    this.formData.belongId = id;
    this.getCommunityMakeMoney();
    this.getRefundNotice();
    // this.getVisitCount();
    this.getInstituteloans();
    this.getCitys();
    this.getProducts();


    // let btn = document.getElementsByClassName('launch-btn');
    // // let btn=this.$refs["launch-btn"];
    // btn.addEventListener('launch', function () {
    //   console.log('success');
    // });
    // btn.addEventListener('error', function (e) {
    //   console.log('fail', e.detail);
    // });


  },

  methods: {
    //获取验证码
    getCode() {
      if (this.formData.phone && this.formData.phone.length == 11) {
        this.$axios.get(`/html/apply/getCode/${this.formData.phone}`).then(() => {
          this.isCode=true;
          this.countdown();
        })
      } else {
        this.$toast('请填写正确的手机号')
      }
    },
    countdown(){

      let timer= setInterval(()=>{
        --this.numCode;
        if(this.numCode==0 || this.numCode<0){
          this.isCode=false;
          this.numCode=60;
          clearInterval(timer);
        }
      },1000)

    },
//滑动到置顶位置
    scollTo() {
      window.scrollTo(0, 300)
    },
    //
    handleErrorFn(e) {
      console.log('fail', e.detail);
    },
    handleLaunchFn(e) {
      console.log('launch', e)
    },
    ready() {
      console.log('标签初始化完毕，可以进行点击操作')
    },
    //获取产品
    getProducts() {
      this.$axios.get(`/html/apply/h5Product/${this.formData.belongId}`).then(res => {
        this.loanMethod = res.data.data
        this.formData.productId = res.data.data[0].itemValue
      })
    },
    //获取城市
    getCitys() {
      this.$axios.get('/html/apply/h5City').then(res => {
        this.citys = res.data.data;
        this.formData.city = res.data.data[0].itemValue
      })
    },
    //获取咨询人数
    getVisitCount() {
      this.$axios.get('/html/apply/visitCount').then(res => {
        this.num = res.data.data
      })
    },
    //获取放款通知
    getRefundNotice() {
      this.$axios.get('/html/apply/loanNotice').then(res => {
        this.refundNotice = res.data.data;
      })
    },
    //快速申请
    apply() {
      if (this.formData.phone && this.formData.name && this.formData.applyMoney) {
        this.formData.applyMoney = +this.formData.applyMoney;
        this.$axios.post('/html/apply/businessOpportunitySave', this.formData).then(() => {

          this.$toast.success('提交成功');
        })
      } else {
        this.$toast('请填写完整信息...');
      }

    },
    //经纪人学院
    getInstituteloans() {
      this.$axios.get('/html/apply/columnList', {
        params: {
          pageNo: 1,
          pageSize: 3,
          type: 0
        }
      }).then(res => {
        this.DkList = res.data.data
      })
    },
    //赚钱社区
    getCommunityMakeMoney() {
      this.$axios.get('/html/apply/columnList', {
        params: {
          pageNo: 1,
          pageSize: 3,
          type: 1
        }
      }).then(res => {
        console.log(res.data.data)
        this.zqList = res.data.data
      })
    },

  },

}
</script>

<style scoped lang="less">
.banner {
  width: 100%;
  height: 180px;
  margin-bottom: 20px;
}

.lending-info {
  padding: 0 15px;
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.fangkuantongzi {
  width: 66px;
  height: 14px;
}

.line {
  width: 1px;
  height: 12px;
  background-color: #FF999999;
  margin: 0 6px;
}

.lending-info-text {
  flex: 1;
  font-size: 14px;
  color: #333333;
}

/*快速申请*/
.quick-application {
  padding: 0 15px 0;
  margin-bottom: 30px;
  position: relative;
}

.dewen1 {
  position: absolute;
  right: 15px;
  left: 15px;
  height: 77px;
  display: inline-block;
}

.dewen2 {
  height: 108px;
  display: inline-block;
  bottom: 0;
}

.quick-application-con {
  box-shadow: 0px 0px 37px 3px rgba(39, 39, 39, 0.08);
  padding: 35px 10px 25px;
}

.title-box {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 11px;
}

.title-zhuangshi1 {
  width: 16px;
  height: 14px;
}

.title-text {
  font-size: 18px;
  font-weight: bold;
  color: #333333;
  margin: 0 10px;
  position: relative;
}

.pass-rate {
  font-size: 10px;
  color: #FFFFFF;
  line-height: 20px;
  width: 70px;
  height: 20px;
  background: #04CFD7;
  border-radius: 8px 8px 8px 0px;
  text-align: center;
  position: absolute;
  top: -26px;
  right: -61px;
}

.tips-text {
  font-size: 14px;
  color: #999999;
  text-align: center;
  margin-bottom: 30px;
}

.time {
  color: #FA330D;
}

.form-title {
  font-size: 15px;
  font-weight: bold;
  color: #333333;
  margin-bottom: 15px;
}

.instructions {
  width: 100%;
  height: 30px;
  background: #FCF2EF;
  font-size: 12px;
  color: #FC6B42;
  line-height: 30px;
  text-align: center;
  margin-bottom: 15px;
}

.consulting-num {
  margin-top: 12px;
  text-align: center;
  font-size: 14px;
  color: #333333;
  margin-bottom: 30px;
}

.contact-me {
  width: 300px;
  height: 45px;
  background: #FC6B42;
  border-radius: 23px;
  font-size: 18px;
  color: #FFFFFF;
  line-height: 45px;
  text-align: center;
  margin: 0 auto;
  position: relative;
  z-index: 99;
}

/*贷款学院*/
.content {
  padding: 0 15px;
}

.content-title {
  font-size: 18px;
  font-weight: bold;
  color: #333333;
  position: relative;
  display: inline-block;
  margin-bottom: 20px;

}

.yuan {
  width: 14px;
  height: 12px;
  position: absolute;
  top: -5px;
  right: -21px;
}

.institute-loans {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 30px;
}

.institute-loans-img {
  width: 115px;
  height: 75px;
  border-radius: 5px;
  margin-right: 15px;
}

.institute-loans-con {
  flex: 1;
  //height: 75px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  //overflow: auto;
}

.institute-loans-title {
  font-size: 15px;
  font-weight: bold;
  color: #333333;
  line-height: 24px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  word-break: break-all;
}

.institute-loans-con-text {
  font-size: 12px;
  color: #999999;
  line-height: 24px;
  width: 100%;
  /*display: -webkit-box;*/
  /*-webkit-box-orient: vertical;*/
  /*-webkit-line-clamp: 1;*/
  /*overflow: hidden;*/


  img {
    width: 100% !important;
    display: inline-block;
  }
}


/*我们的优势*/
.menu-box {
  margin-bottom: 20px;
}

.menu {
  height: 60px;
  background: #FFFFFF;
  box-shadow: 0px 0px 18px 1px rgba(39, 39, 39, 0.08);
  border-radius: 5px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5px;
}

.menu-img {
  width: 35px;
  height: 35px;
}

.menu-title {
  color: #333333;
  font-weight: bold;
  font-size: 12px;
  margin-bottom: 5px;
}

.jiacu {
  font-size: 18px;
  position: relative;
}

.jia {
  font-size: 11px;
  font-weight: bold;
  color: #333333;
  position: absolute;
  top: -4px;
  right: -3px;
}

.menu-tips {
  font-size: 11px;
  color: #999999;
}

/*服务区域*/
.map {
  width: 100%;
  height: 212px;
  display: inline-block;
  margin-bottom: 25px;
}

.zx-phone {
  display: block;
  width: 100%;
  height: 35px;
  background: #FDF1EF;
  line-height: 35px;
  font-size: 15px;
  font-weight: bold;
  color: #FA330D;
  text-align: center;
  margin-bottom: 31px;
}

/*底部*/
.bottom {
  width: 100%;
  height: 49px;
  background: #FC6B42;
  display: flex;
  align-items: center;
}

.bottom-item {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  position: relative;
}

.btn1 {
  width: 16px;
  height: 16px;
  margin-right: 4px;
}

.btn-text {
  font-size: 14px;
  color: #FFFFFF;
}

.btn-line {
  width: 1px;
  height: 18px;
  background: #FFFFFF;
}

.flex-al {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-al div {
  margin-right: 10px;
}
</style>
<style>
.select-box1 {
  width: 100% !important;
  margin-bottom: 10px;
}

.select-box2 {
  margin-bottom: 15px;
}

.van-notice-bar {
  padding: 0 !important;
  background-color: #fff !important;
}

.notice-swipe {
  height: 30px;
  line-height: 30px;
  font-size: 14px;
  color: #333333;

}
</style>
<style lang="less">
.img-box {
  height: 200px;
  overflow: auto;
}

.institute-loans-con-text {

  img {
    width: 100% !important;
    display: inline-block;
  }
}


.input-box {
  height: 40px;
  background: #fff;
  border-radius: 4px;
  width: 100%;
  display: flex;
  align-items: center;
  //padding: 0 0 0 14px;
  margin-bottom: 10px;
  box-sizing: border-box;
  border: 1px solid #DCDFE6;
  overflow: hidden;
}

.input-content {
  flex: 1;
  width: 100%;
  font-size: 14px;
  height: 38px;
  background-color: transparent;

}

.code-btn {
  /*width: 100px;*/
  padding: 0 14px;
  height: 100%;
  line-height: 38px;
  background: linear-gradient(-90deg, #DEDDDD, #FFFFFF);
  border-radius: 4px;
  text-align: center;
  font-size: 14px;

}

.active-code-btn {
  color: #999898;
}

.transparent-btn {
  background-color: #FC6B42;
  opacity: 0;
}




</style>

<style>
.input-box .el-input__inner{
  border: none;

}
</style>